<template>
  <div>
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        ref="searchForm"
        :model="searchForm"
        size="small"
        :class="
          this.$i18n.t('language') === 'English'
            ? 'en-search-form'
            : 'zh-search-form'
        "
      >
        <div class="input-row">
          <el-form-item
            prop="name"
            :label="$t('platform.name') + ':'"
          >
            <el-input
              v-model="searchForm.appealName"
              size="small"
              :placeholder="$t('platform.name')"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item :label="$t('platform.applicant') + ':'">
            <el-input
              v-model="searchForm.applicant"
              size="small"
              :placeholder="$t('platform.applicant')"
            ></el-input>
          </el-form-item> -->

          <el-form-item :label="$t('users.phoneNumber') + ':'">
            <el-input
              v-model="searchForm.phone"
              size="small"
              :placeholder="$t('users.phoneNumber')"
            ></el-input>
          </el-form-item>

          <el-form-item :label="$t('distributionMsg.auditStatus') + ':'">
            <el-select
              clearable
              filterable
              v-model="searchForm.status"
              :placeholder="$t('distributionMsg.auditStatus')"
            >
              <el-option
                :value="0"
                label="待处理"
              ></el-option>
              <el-option
                :value="1"
                label="已处理"
              ></el-option>

            </el-select>
          </el-form-item>

          <el-form-item style="float: right">
            <el-button
              @click="searchChange(true)"
              type="primary"
              size="small"
              :loading="loading"
            >
              {{ $t("product.search") }}
            </el-button>
            <el-button
              @click="resetForm('searchForm')"
              size="small"
              :loading="loading"
            >
              {{ $t("product.reset") }}
            </el-button>
          </el-form-item>

        </div>
      </el-form>
    </div>
    <el-button
      size="small"
      type="primary"
      style="margin-bottom: 20px;"
      @click="openAllUnbindDialog"
    >批量解绑</el-button>
    <el-table
      :data="dataList"
      tooltip-effect="dark"
      header-cell-class-name="table-header"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        :selectable="disableSelection"
        type="selection"
      ></el-table-column>
      <el-table-column
        type="index"
        :index="indexMethod"
        align="center"
        :label="$t('brand.serialNumber')"
      ></el-table-column>
      <el-table-column
        prop="wxNo"
        align="center"
        :label="$t('platform.wechatAccount')"
      ></el-table-column>
      <el-table-column
        prop="appealName"
        align="center"
        :label="$t('platform.name')"
      ></el-table-column>
      <el-table-column
        prop="appealReason"
        align="center"
        :label="$t('platform.causeOfAppeal')"
      ></el-table-column>
      <el-table-column
        prop="appealCard"
        align="center"
        :label="$t('platform.causeCertificateNumber')"
      ></el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        :label="$t('users.phoneNumber')"
      ></el-table-column>
      <el-table-column
        prop="applyTime"
        align="center"
        :label="$t('shop.applicationDate')"
      ></el-table-column>
      <el-table-column
        align="center"
        label="绑定状态"
      >
        <template slot-scope="{row}">
          <div>
            {{ row.bdingStatus == 0 ? '绑定中' : '已解绑' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('brand.status')"
      >
        <template slot-scope="{row}">
          <div>
            {{ row.status == 0 ? '待处理' : '已处理' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('crud.menu')"
      >
        <template slot-scope="{row}">
          <div>
            <el-button
              :loading="loading"
              v-if="!row.bdingStatus"
              type="text"
              @click="openUnbindDialog(row)"
            >{{ $t('platform.unbind') }}</el-button>
            <el-button
              :loading="loading"
              v-if="row.status != 1"
              type="text"
              @click="openReplyDialog(row)"
            >{{ $t('platform.reply') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>

    <el-dialog
      title="证件编号解绑确认"
      :visible.sync="unbindDialogVisible"
      :before-close="handleCloseUnbindDialog"
      center
      :close-on-click-modal="false"
    >
      <div style="text-align: center;">是否确认解除该证件编号与手机号的绑定关系？</div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="unbindDialogVisible = false">取消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="unbind"
        >确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="批量证件编号解绑确认"
      :visible.sync="unbindAllDialogVisible"
      :before-close="handleCloseAllUnbindDialog"
      center
      :close-on-click-modal="false"
    >
      <div style="text-align: center;">是否确认解除选中的证件编号与手机号的绑定关系？</div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="unbindAllDialogVisible = false">取消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="unbindAll"
        >确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="申诉回复"
      :visible.sync="replyDialogVisible"
      :before-close="handleCloseReplyDialog"
      :close-on-click-modal="false"
    >
      <el-form label-position="top">
        <el-form-item label="申诉描述">
          <el-input
            readonly
            type="textarea"
            v-model="rowReply.appealReason"
            :autosize="{ minRows: 5, maxRows: 10}"
          ></el-input>
        </el-form-item>
        <el-form-item label="申诉凭证">
          <div>
            <el-image
              v-for="(item,index) in rowReply.picList"
              :key="index"
              style="width: 180px;margin-right: 20px;"
              :src="item"
              :preview-src-list="[item]"
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </el-form-item>
        <el-form-item label="填写回复">
          <el-input
            type="textarea"
            v-model="rowReply.context"
            :autosize="{ minRows: 5, maxRows: 10}"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="reply"
          :loading="loading"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      activeName: '1',
      searchForm: {
        appealName: '',
        // applicant: '',
        phone: '',
        status: ''
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      theData: null, // 保存上次点击查询的请求条件
      theParams: null, // 保存上次点击查询的请求条件
      dataList: [],
      unbindDialogVisible: false,
      unbindAllDialogVisible: false,
      replyDialogVisible: false,
      rowReply: {
        appealReason: '',
        picList: [],
        context: '您的诉求我们已解决，请尝试重新绑定'
      },
      rowUnbind: null,
      multipleSelection: []
    }
  },
  mounted() { },
  created() {
    this.getDataList()
  },
  methods: {
    indexMethod(index) {
      return (this.page.currentPage - 1) * this.page.pageSize + index + 1;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val
    },
    disableSelection(row) {
      if (row.bdingStatus) {
        return false
      } else {
        return true
      }
    },

    // 条件查询 JSON.stringify(arr)
    searchChange(newData = false) {
      this.page.currentPage = 1;
      this.getDataList(this.page, newData);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = {
        appealName: '',
        phone: '',
        status: ''
      }
      this.$forceUpdate();
    },
    getDataList(page, newData = false) {
      page = page || this.page;
      if (newData || !this.theData) {
        this.theData = {
          current: page.currentPage,
          size: page.pageSize,
        };
        this.theParams = JSON.parse(JSON.stringify(this.searchForm));
      } else {
        this.theData.current = page.currentPage;
        this.theData.size = page.pageSize;
      }

      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/pageTzEmployeeAppeal"),
        method: "get",
        params: this.$http.adornParams(
          Object.assign(this.theData, this.theParams, {
            appealName: this.searchForm.appealName,
            phone: this.searchForm.phone,
            status: this.searchForm.status,
          })
        ),
      }).then(({ data }) => {
        this.loading = false
        console.log(data.records);
        this.dataList = data.records;
        this.page.total = data.total;
        this.page.currentPage = data.current;
      }).catch(() => {
        this.loading = false
      })

    },
    handleCloseUnbindDialog(done) {
      done()
    },
    handleCloseAllUnbindDialog(done) {
      done()
    },
    handleCloseReplyDialog(done) {
      this.rowReply = {
        appealReason: '',
        picList: [],
        context: '您的诉求我们已解决，请尝试重新绑定'
      }
      done()
    },
    openUnbindDialog(row) {
      console.log(row);
      this.rowUnbind = row
      this.unbindDialogVisible = true
    },
    openAllUnbindDialog() {
      if (!this.multipleSelection.length) {
        this.$message.warning('请勾选需要解绑的项')
        return
      }
      this.unbindAllDialogVisible = true
    },
    openReplyDialog(row) {
      this.replyDialogVisible = true
      this.rowReply = {
        ...this.rowReply,
        ...row
      }
      let arr = row.files.split(',').map(item => {
        return this.resourcesUrl + item
      });
      this.rowReply.picList = arr
    },
    unbind() {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/unbind"),
        method: "post",
        data: [{
          phone: this.rowUnbind.phone,
          appealCard: this.rowUnbind.appealCard,
          id: this.rowUnbind.id
        }]
      }).then(({ data }) => {
        this.loading = false
        console.log(data);
        this.$message.success('解绑成功')
        this.unbindDialogVisible = false
        this.getDataList()
        this.rowUnbind = null
      }).catch(() => {
        this.loading = false
      })
    },
    unbindAll() {
      let arr = []
      this.multipleSelection.forEach(item => {
        let obj = {
          id: item.id,
          appealCard: item.appealCard,
          phone: item.phone,
        }
        arr.push(obj)
      })

      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/unbind"),
        method: "post",
        data: arr,
      }).then(({ data }) => {
        console.log(data);
        this.loading = false
        this.$message.success('解绑成功')
        this.unbindAllDialogVisible = false
        this.getDataList()
        this.multipleSelection = []
      }).catch(() => {
        this.loading = false
      })
    },
    reply() {
      if (this.rowReply.context.trim() == '') {
        this.$message.warning('请填写回复内容')
        return
      }
      this.loading = true
      this.$http({
        url: this.$http.adornUrl("/employeeAuth/reply"),
        method: "post",
        data: this.$http.adornData({
          context: this.rowReply.context.trim(),
          appealD: this.rowReply.id
        })
      }).then(({ data }) => {
        this.loading = false
        console.log(data);
        this.getDataList()
        this.$message.success('回复成功')
        this.rowReply = {
          appealReason: '',
          picList: [],
          context: '您的诉求我们已解决，请尝试重新绑定'
        }
        this.replyDialogVisible = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style>
</style>